<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>state</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        function ProductCategoryRow(props) {
            return (
                <tr>
                    <th colSpan="2">
                        {props.category}
                    </th>
                </tr>

            )
        }

        function ProductRow(props) {

            const { stocked, price } = props
            const name = stocked ? props.name : <span style={{ color: 'red' }}>
                {props.name}
            </span>;
            return (
                <tr>
                    <th>{name}</th>
                    <th>{price}</th>
                </tr>
            )

        }
        function ProductTable(props) {
            const { products, comparText } = props
            const rows = []
            let lastCategory = null
            products.forEach(product => {

                const { name, price, category, stocked } = product;
                if (name.indexOf(comparText) === -1) {
                    return;
                }
                if (product.category !== lastCategory) {
                    rows.push(
                        <ProductCategoryRow key={category} category={category} />
                    )
                }
                rows.push(
                    <ProductRow key={name} name={name} price={price} stocked={stocked} />
                )
                lastCategory = category
            });
            return (
                <table>
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Price</th>
                        </tr>
                    </thead>
                    <tbody>{rows}</tbody>
                </table>
            )

        }

        function SearchBar(props) {


            function filterText(e) {
                console.log(e)
                props.filterText(e.target.value)

            }

            return (
                <form>
                    <input type="text"
                        onChange={filterText}>
                    </input>
                    <p>
                        <input
                            type="checkbox"
                            checked={props.inStockOnly}
                        />
                        {' '}
                        Only show products in stock
                    </p>

                </form>
            )

        }
        class FilterableProductTable extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    inputTest: '',
                    stockOnly: false
                }
                this.filterText = this.filterText.bind(this)
            }
            filterText(text) {
                console.log(text)
                this.setState(
                    { inputTest: text }
                )

            }
            render() {
                const { inputTest, stockOnly } = this.state
                return (
                    <div>
                        <SearchBar filterText={this.filterText} />
                        <ProductTable products={PRODUCTS} comparText={inputTest} />
                    </div>
                )
            }
        }
        const PRODUCTS = [
            { category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football' },
            { category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball' },
            { category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball' },
            { category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch' },
            { category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5' },
            { category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7' }
        ];

        ReactDOM.render(<FilterableProductTable />, document.getElementById('test'))


    </script>
</body>

</html>